<template>
    <div class="left-nav" :style="{height: screenHeight -104 +'px'}">
        <div class="left-nav__into">
            <img src="../assets/images/pic.jpg" :class="classO" @mouseover="addAnmated" @mouseout="removeAnmated"/>
            <h4 class="left-nav__title">Xiao Yang Zi</h4>
            <p class="left-nav__msg">前端小虾米-吃喝玩乐都不行, 最喜欢的一句话： “用我的一生，换你十年天真无邪”!</p>
        </div>
        <div class="left-nav__box" v-if="getGetHotArticle.length">
            <h4>最热文章</h4>
            <ul class="left-nav__article">
                <li v-for="(item, index) in getGetHotArticle" :key="index" v-if="index<4" @click="goDetail(item._id)">
                    {{item.title}}
                </li>
            </ul>
        </div>
        <div class="left-nav__box" v-if="getGetTsList.length">
            <h4>标签</h4>
            <ul class="left-nav__tag">
                <li v-for="(item, index) in getGetTsList[0].tags" :class="'tag'+index" :key="index" @click="changeTag(item)">{{item}}</li>
            </ul>
        </div>
        <div class="zzsc-content">
            <canvas id="clock1_" width="200px" height="200px"></canvas>     
        </div>
    </div>
</template>

<script>
import {mapActions, mapGetters} from 'vuex'
import {clock_conti} from '../util/canvas_clock'
export default {
    name: 'left-nav',

    data(){
        return {
            screenHeight: document.documentElement.clientHeight,
            classO: {
                "left-nav__img": true,
                "animated": true,
                "bounce": false
            }
        }
    },
    
    computed: {        
        ...mapGetters(['getGetTsList', 'getGetHotArticle'])
    },

    created(){
        // canvas时钟
        let clockd1_={
            "indicate": true,
            "indicate_color": "#222",
            "dial1_color": "#000",
            "dial2_color": "#f90",
            "dial3_color": "#f90",
            "time_add": 1,
            "time_24h": true,
            "date_add":3,
            "date_add_color": "#999",
        };
        let c = document.getElementById('clock1_');
        this.$nextTick(function () {
            let c = document.getElementById('clock1_');
            let cns1_ = c.getContext('2d');
            clock_conti(200,cns1_,clockd1_);
        });
        this.$store.dispatch({type: 'getHotArticle'});
    },

    methods: {
        addAnmated(){
            this.classO.bounce = true;
        },
        removeAnmated(){
            this.classO.bounce = false;
        },
        changeTag(n){
            let k = 0;
            if(n == '其他'){
                k = 6;
            }else if(n == 'Flex'){
                k = 5;
            }
            else if(n == '后端'){
                k = 4;
            }
            else if(n == 'JAVASRICT'){
                k = 3;
            }
            else if(n == '前端'){
                k = 2;
            }
            else if(n == 'less'){
                k = 1;
            }
            // 向父组件传值
            this.$emit('leftNavEvent', k);
        },
        goDetail(id){
            // 跳转商详
            this.$router.push({path: `/detail`, query: {id}})
        }
    }

}
</script>

<style lang="less">
.left-nav {
    position: relative;
    width: 252px;
    text-align: left;
    border-right: 1px solid #ebedf0;
    &__into {
        text-align: center;
    }
    &__img {
        width: 132px;
        height: 132px;
        border-radius: 50%;
        border: 4px solid #ccc;
    }
    &__title {
        font-size: 22px;
        color: #000;
        margin-top: 20px;
        font-family: Lucida Console, Tahoma, Geneva, Verdana, sans-serif;
    }
    &__msg {
        color: #999;
        line-height: 20px;   
        text-align: left;
        padding: 0 36px;    
        margin-top: 20px;     
    }
    &__box {
        position: relative;
        margin-top: 30px;
        padding-top: 30px;
        h4 {
            position: absolute;
            left: 20px;
            top: -10px;
            background: #fff;
            padding: 0 6px;
            color: rgba(0,0,0,.85);
            font-size: 16px;
        }
        &::before {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 1px;
            background: #ddd;
            display: block;
            content: '';
        }
    }
    &__article {
        li {
            height: 30px;
            margin: 0 30px;
            line-height: 30px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: block;
            cursor: pointer;
            &:hover {
                color: #f90;
            }
        }
    }
    &__tag {
        display: flex;
        flex-wrap: wrap;
        li {
            margin: 0 10px 6px;
            padding: 0 10px;
            border-radius: 3px;
            line-height: 20px;
            color: #fff;
            border: 1px solid #f90;
            background: #f90;
            cursor: pointer;
            &:hover {
                box-shadow: #bbb 0 2px 8px!important;
            }
        }
    }
}
.zzsc-content{
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 1em;
}
// 标签颜色
.tag0 {
    background: #db2828!important;
    border-color: #db2828!important;
}
.tag1 {
    background: #f2711c!important;
    border-color: #f2711c!important;
}
.tag2{
    background: #21ba45!important;
    border-color: #21ba45!important;
}
.tag3 {
    background: #e03997!important;
    border-color: #e03997!important;
}
.tag4 {
    background: #fbbd08!important;
    border-color: #fbbd08!important;
}
.tag5 {
    background: #6435c9!important;
    border-color: #6435c9!important;
}
.tag6 {
    background: #00b5ad;
    border-color: #00b5ad;
}
</style>

